<template>
  <div class="bgbg" v-if="Isshow3">
    <div class="z4">
      <div class="closediv" @click="closeshow"></div>
      <div class="title">雨水情-{{ data.code }}</div>
      <div class="bodyt">
        <div class="time">
          <el-select class="select" v-model="data.select" placeholder="月">
            <el-option label="时" value="4"></el-option>
            <el-option label="天" value="3"></el-option>
            <el-option label="月" value="2"></el-option>
            <el-option label="年" value="1"></el-option>
          </el-select>
          <el-date-picker
            class="date"
            v-model="data.value1"
            type="datetimerange"
            start-placeholder="Start date"
            range-separator="——"
            end-placeholder="End date"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY-MM-DD"
            time-format="HH:mm:ss"
          />
          <el-button color="#46A5D9" @click="resetview">搜索</el-button>
        </div>
        <div class="echarts">
          <MyCharts
            v-if="datashow"
            :dataSource="data.dataSource"
            canvasWidth="100%"
            canvasHeight="100%"
          ></MyCharts>
          <h1 style="text-align: center" v-else>暂无数据</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Getyushuiqing, getyushuixqdata, getshuiqingdata } from "@/api/index";
import MyCharts from "@/components/echarts/index.vue";
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
let datashow = ref(true);
const data = reactive({
  code: "4208820100",
  value1: [
    moment().format("YYYY-MM-DD") + " " + moment().format("00:00:00"),
    moment().format("YYYY-MM-DD") + " " + moment().format("23:59:59"),
  ],
  select: "4",
  xdata: "",
  ydata: "",
  dataSource: {
    title: {
      text: "水位和雨量",
      left: "center",
      show: false,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        animation: true,
        label: {
          backgroundColor: "#505765",
        },
      },
    },
    legend: {
      data: ["Evaporation", "Rainfall"],
      left: 10,
      show: false,
    },
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        restore: {},
        saveAsImage: {},
      },
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: "all",
        },
      ],
    },
    grid: [
      // {
      //   height: "33%",
      //   left: "10%",
      //   right: "10%",
      //   top: "10%",
      //   // bottom: "80%",
      // },
      // {
      //   height: "33%",
      //   left: "10%",
      //   right: "10%",
      //   top: "55%",
      //   // bottom: "12%",
      // },
      { bottom: "22%", top: "18%", left: "12%" },
    ],
    xAxis: [
      // {
      //   type: "category",
      //   // show:false,
      //   boundaryGap: true,
      //   axisLine: {
      //     onZero: true,
      //     lineStyle: {
      //       color: "#3F98BA",
      //       width: 1,
      //     },
      //   },
      //   axisTick: {
      //     show: false,
      //   },
      //   axisLabel: { show: false },
      //   data: [
      //     "5-1",
      //     "5-2",
      //     "5-3",
      //     "5-4",
      //     "5-5",
      //     "5-6",
      //     "5-7",
      //     "5-8",
      //     "5-9",
      //     "5-10",
      //     "5-11",
      //     "5-12",
      //     "5-13",
      //     "5-14",
      //     "5-15",
      //     "5-16",
      //     "5-17",
      //     "5-18",
      //     "5-19",
      //     "5-20",
      //     "5-21",
      //     "5-22",
      //     "5-23",
      //     "5-24",
      //     "5-25",
      //     "5-26",
      //     "5-27",
      //     "5-28",
      //     "5-29",
      //     "5-30",
      //     "5-31",
      //   ],
      // },
      {
        // gridIndex: 1,
        type: "category",
        boundaryGap: true,
        // axisLine: { onZero: true },
        axisLine: {
          onZero: true,
          lineStyle: {
            color: "#3F98BA",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: { color: "#ffffff", rotate: 35 },
        data: [
          "5-1",
          "5-2",
          "5-3",
          "5-4",
          "5-5",
          "5-6",
          "5-7",
          "5-8",
          "5-9",
          "5-10",
          "5-11",
          "5-12",
          "5-13",
          "5-14",
          "5-15",
          "5-16",
          "5-17",
          "5-18",
          "5-19",
          "5-20",
          "5-21",
          "5-22",
          "5-23",
          "5-24",
          "5-25",
          "5-26",
          "5-27",
          "5-28",
          "5-29",
          "5-30",
          "5-31",
        ],
        position: "bottom",
      },
    ],
    yAxis: [
      // {
      //   name: "雨量(mm)",
      //   boundaryGap: [0, "50%"],
      //   nameLocation: "start",
      //   nameTextStyle: {
      //     color: "#ffffff",
      //     // verticalAlign: "",
      //     // padding: [-5, 50, 0, 0],
      //   },
      //   type: "value",
      //   inverse: true, // 这使得这个y轴的坐标轴倒立
      //   axisLine: {
      //     show: true,
      //     lineStyle: {
      //       color: "#3F98BA",
      //       width: 1,
      //     },
      //   },
      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       type: "dashed",
      //       color: "grey",
      //     },
      //   },
      //   axisLabel: {
      //     color: "#ffffff",
      //   },
      // },
      {
        name: "雨量(mm)",
        // name: "水位(m)",
        // gridIndex: 1,
        boundaryGap: [0, "50%"],
        nameLocation: "end",
        nameTextStyle: {
          color: "#ffffff",
          verticalAlign: "bottom",
          // padding: [0, 34, 150, 0],
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3F98BA",
            width: 1,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "grey",
            width: 1,
          },
        },
        axisLabel: {
          color: "#ffffff",
        },
      },
    ],
    series: [
      // {
      //   name: "雨量(mm)",
      //   type: "line",
      //   symbolSize: 0,
      //   lineStyle: {
      //     width: 1,
      //     color: "#00B1CE",
      //   },
      //   itemStyle: {
      //     borderWidth: 0,
      //   },
      //   emphasis: {
      //     focus: "series",
      //   },
      //   areaStyle: {
      //     normal: {
      //       color: "#00B1CE",
      //     },
      //   },
      //   markArea: {
      //     silent: true,
      //     itemStyle: {
      //       color: "#00B1CE",
      //       opacity: 0,
      //     },
      //   },
      //   data: [
      //     3, 1, 3, 4, 2, 3, 5, 0, 5, 6, 7, 8, 3, 1, 4, 5, 2, 4, 5, 6, 6, 7, 3,
      //     3, 5, 4, 2, 6, 7, 3, 6,
      //   ],
      // },
      {
        // name: "水位(m)",
        name: "雨量(mm)",
        type: "line",
        // xAxisIndex: 1,
        // yAxisIndex: 1,
        symbolSize: 0,
        lineStyle: {
          width: 2,
          color: "#3E88B6",
          type: "dashed",
        },
        itemStyle: {
          borderWidth: 0,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          // show:false,
          normal: {
            color: "#00B1CE",
            opacity: 0,
          },
        },
        data: [
          0, 6, 20, 5, 9, 4, 9, 4, 4, 24, 14, 9, 4, 19, 14, 4, 4, 9, 4, 14, 9,
          24, 12, 4, 12, 15, 6, 12, 25, 15, 20,
        ],
      },
    ],
  },
});
let Isshow3 = ref(false);
const closeshow = () => {
  Isshow3.value = false;
};
ue.interface.Isshowshui = function (val) {
  Isshow3.value = true;
  data.code = val;
  data.select = "4";
  (data.value1 = [
    moment().format("YYYY-MM-DD") + " " + moment().format("00:00:00"),
    moment().format("YYYY-MM-DD") + " " + moment().format("23:59:59"),
  ]),
    getyushuiqing();
};
function getyushuiqing() {
  getyushuixqdata({
    type: data.select,
    stcd: data.code,
    // stcd: "4208820100",
    startTime: data.value1[0],
    endTime: data.value1[1],
  }).then((res) => {
    // console.log(res.data);
    if (res.data[0].date == null && res.data[0].rainfallSum == null) {
      datashow.value = false;
    } else {
      datashow.value = true;
      res.data.reverse();
      data.xdata = res.data.map((item) => item.date);
      data.ydata = res.data.map((item) => item.rainfallSum);
      data.dataSource.xAxis[0].data = res.data.map((item) => item.date);
      data.dataSource.series[0].data = res.data.map((item) => item.rainfallSum);
    }
    // data.dataSource.series[1].data = res.result.map((item) => item.waterLevel);
  });

  getshuiqingdata({
    type: data.select,
    stcd: data.code,
    // stcd: "4208820100",
    startTime: data.value1[0],
    endTime: data.value1[1],
  }).then((res) => {
    console.log(res, "水情");
    if (res.data.length != 0) {
      data.dataSource.series[1].data = res.data.map((item) => item.avgValue);

      data.dataSource = {
        title: {
          text: "Rainfall and Flow Relationship",
          left: "center",
          show: false,
        },
        grid: {
          bottom: 80,
        },
        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765",
            },
          },
        },
        legend: {
          data: ["雨量(mm)", "水位(m)"],
          left: "center",
          textStyle: {
            color: "#fff",
          },
          // show: false,
        },
        // dataZoom: [
        //   {
        //     show: true,
        //     realtime: true,
        //     start: 65,
        //     end: 85,
        //   },
        //   {
        //     type: "inside",
        //     realtime: true,
        //     start: 65,
        //     end: 85,
        //   },
        // ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            // prettier-ignore
            boundaryGap: true,
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "#3F98BA",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: { show: true, rotate: 35, color: "#ffffff" },
            data: data.xdata,
          },
        ],
        yAxis: [
          {
            name: "雨量(mm)",
            type: "value",
            boundaryGap: [0, "50%"],
            // nameLocation: "start",
            nameTextStyle: {
              color: "#ffffff",
              // verticalAlign: "",
              // padding: [-5, 50, 0, 0],
            },
            type: "value",
            inverse: false, // 这使得这个y轴的坐标轴倒立
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3F98BA",
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "grey",
              },
            },
            axisLabel: {
              color: "#ffffff",
            },
          },
          {
            name: "水位(m)",
            // nameLocation: "start",
            alignTicks: true,
            type: "value",
            inverse: false,
            boundaryGap: [0, "50%"],
            nameLocation: "end",
            nameTextStyle: {
              color: "#ffffff",
              verticalAlign: "bottom",
              // padding: [0, 34, 150, 0],
            },
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3F98BA",
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "grey",
                width: 1,
              },
            },
            axisLabel: {
              color: "#ffffff",
            },
          },
        ],
        series: [
          {
            name: "雨量(mm)",
            type: "line",
            areaStyle: { opacity: 0 },
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            // markArea: {
            //   silent: true,
            //   show: false,
            //   itemStyle: {
            //     opacity: 0,
            //   },
            //   // data: [
            //   //   [
            //   //     {
            //   //       xAxis: "2009/9/12\n7:00",
            //   //     },
            //   //     {
            //   //       xAxis: "2009/9/22\n7:00",
            //   //     },
            //   //   ],
            //   // ],
            // },
            // prettier-ignore
            data:data.ydata,
          },
          {
            name: "水位(m)",
            type: "line",
            yAxisIndex: 1,
            areaStyle: {
              opacity: 0,
            },
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            // markArea: {
            //   silent: true,
            //   itemStyle: {
            //     opacity: 0,
            //   },
            //   // data: [
            //   //   [
            //   //     {
            //   //       xAxis: "2009/9/10\n7:00",
            //   //     },
            //   //     {
            //   //       xAxis: "2009/9/20\n7:00",
            //   //     },
            //   //   ],
            //   // ],
            // },
            // prettier-ignore
            data:  res.data.map((item) => item.avgValue),
          },
        ],
      };
    }
  });
}
const resetview = () => {
  getyushuiqing();
  // getyushuixqdata({
  //   type: data.select,
  //   stcd: data.code,
  //   startTime: data.value1[0],
  //   endTime: data.value1[1],
  // }).then((res) => {
  //   // data.dataSource.xAxis.forEach((item) => {
  //   //   item.data = res.result.map((item) => item.time);
  //   // });
  //   // data.dataSource.series[0].data = res.result.map((item) => item.rainfall);
  //   // data.dataSource.series[1].data = res.result.map((item) => item.waterLevel);
  // });
};
onMounted(() => {
  // getyushuiqing();
});
</script>

<style lang="scss" >
.bgbg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999;
  .z4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 450.37px;
    background: url("@/assets/image/z4(1).png") 0px no-repeat;
    background-size: cover;
    color: white;
    padding-left: 17px;
    box-sizing: border-box;
    z-index: 99999;
    .closediv {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 15px;
      height: 15px;
      // border: 1px solid red;
      cursor: pointer;
    }
    .title {
      font-family: "Source Han Sans CN";
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      // line-height: 25px;
      // text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .bodyt {
      width: 100%;
      height: 419.29px;
      position: absolute;
      top: 30px;
      left: 0px;
      .time {
        position: absolute;
        top: 0px;
        left: 0px;
        //   border: 1px solid red;
        display: flex;
        .select {
          margin-top: 21px;
          margin-left: 64px;
          color: #ffffff;
        }
        .date {
          margin: 21px 40px 0px 20px;
        }
        .el-button {
          color: #ffffff;
          margin-top: 21px;
        }
      }
      .echarts {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 338px;
        //   border: 1px solid red;
      }
    }
  }
}
.bgbg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层颜色和透明度 */
}
::v-deep {
}
</style>